<template>
    <div class="register">
      <van-steps class="steps" :active="active" finish-icon="like-o">
        <van-step>手机号验证</van-step>
        <van-step>验证码验证</van-step>
        <van-step>填写密码</van-step>
        <van-step>注册完成</van-step>
      </van-steps>
      <div v-if="active === 0" class="step0 step-item">
        <van-form class="login-form" @submit="checkPhoneHandler">
          <van-cell-group inset>
            <van-field
              v-model="phone"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号', pattern: /\d{11}/ }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              验证
            </van-button>
          </div>
        </van-form>
      </div>
      <div v-if="active === 1" class="step1 step-item">
        <van-form class="login-form" @submit="checkCodeHandler ">
          <van-cell-group inset>
            <van-field
              v-model="code"
              center
              clearable
              placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            >
              <template #button>
                <van-button :disabled="codeBtn" @click="sendCodeHandler" size="small" type="primary">发送验证码</van-button>
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              验证
            </van-button>
          </div>
        </van-form>
      </div>
  
      <div v-if="active === 2" class="step2 step-item">
        <van-form class="login-form" @submit="registerHandler">
          <van-cell-group inset>
            <van-field
              v-model="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="rpwd"
              name="重复密码"
              label="重复密码"
              placeholder="重复密码"
              :rules="[{ required: true, message: '请填写重复密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              注册
            </van-button>
          </div>
        </van-form>
      </div>
      <div v-if="active === 3" class="step3 step-item">
        <van-icon class="finish" name="passed" />
        <router-link to="/login">
          <van-button class="login" type="success">去登录</van-button>
        </router-link>
      </div>
    </div>
  </template>
<script setup lang="ts">
import { ref } from 'vue'
import { checkPhoneApi, sendCodeApi, checkCodeApi, registerApi } from '@/api/users'
import { Toast } from 'vant';

const active = ref<number>(0)

// 验证手机号
const phone = ref<string>('')
const checkPhoneHandler = async()=>{
    const res = await checkPhoneApi(phone.value)
    console.log(res);
    if(((res as unknown) as {code:string}).code==='200'){
        active.value++
        return
    }
    Toast({
    message: '手机号已被注册',
    icon: 'phone-circle-o',
  })

}
const code = ref<string>('')
const codeBtn=ref<boolean>(false)
const sendCodeHandler= async () => {
    codeBtn.value=true
    const res = await sendCodeApi(phone.value)
    console.log(res);
    
}
const checkCodeHandler= async()=>{
    const res = await checkCodeApi(phone.value,code.value)
    if (((res as unknown) as { code: string }).code === '200') {
    active.value++
    return
  }
  Toast({
    message: '验证码错误',
    icon: 'phone-circle-o',
  })


}
const password = ref<string>('')
const rpwd = ref<string>('')
const registerHandler = async() => {
    if(password.value!==rpwd.value)
    return Toast({
    message: '两次密码不一致',
    icon: 'phone-circle-o',
  })
  const res = await registerApi(phone.value, password.value)
  if (((res as unknown) as { code: string }).code === '200') {
    active.value++
    return
  }
  Toast({
    message: '注册失败, 请重试',
    icon: 'phone-circle-o',
  })
}
</script>
<style lang="scss" scoped>
.login{
    margin-top: 20px;
    position: absolute;
    left: 0;
    right: 0;
}
</style>